<template>
  <div>
    <div id="vue-hls-player"></div>
    <!-- {{ $version }} -->
  </div>
</template>

<script>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls.js';

export default {
  name: 'xg',
  data() {
    return {
      url:
        // 'https://cn-jsnt-ct-01-24.bilivideo.com/live-bvc/962286/live_406986743_49167407_prohevc/index.m3u8',
        // 'https://boliu.chenxi618.com/xxt1/sn1.m3u8',
        'https://boliu.chenxi618.com/xinmantang3/xinmantang3.m3u8',
      // 'https://c1--cn-gotcha208.bilivideo.com/live-bvc/934674/live_35613568_7391549_bluray/index.m3u8',
      // 生产-周期性
      // 播流地址：
    };
  },
  mounted() {
    if (HlsPlugin.isSupported()) {
      new Player({
        el: document.querySelector('#vue-hls-player'),
        url: this.url,
        isLive: true,
        plugins: [HlsPlugin],
        autoplay: true,
        autoplayMuted: false,
        fluid: true,
        width: '100%',
        height: '300px',
      });
    }
  },
};
</script>
